<template>
  <vue-ueditor-wrap class="new-edit" v-model="msg" :config="editorConfig"></vue-ueditor-wrap>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const msg = ref('')

//富文本配置
const editorConfig = {
  initialFrameWidth: null,//设置null则宽度自适应
  initialFrameHeight: 320,//区域内容高度
  catchRemoteImageEnable: false, //抓取远程图片是否开启,默认true
  autoHeightEnabled: false, //固定高度且带滚动条
  autoSyncData: false,
  autoFloatEnabled: true,
  UEDITOR_HOME_URL: '/ueditor/',
  toolbars: [ //根据需求筛选需要的功能，这里是根据需求筛选后的
    [
      '|',
      'source',
      'bold',
      'italic',
      'underline',
      'fontborder',
      'strikethrough',
      'superscript',
      'subscript',
      'forecolor',
      'backcolor',
      'pasteplain',
      '|',
      'insertorderedlist',
      'insertunorderedlist',
      'fontfamily',
      'fontsize',
      'paragraph',
      'indent',
      'justifyleft',
      'justifycenter',
      'justifyright',
      'justifyjustify',
      'inserttable',
      'touppercase',
      'tolowercase',
      'imagenone',
      'imageleft',
      'imageright',
      'imagecenter',
      'horizontal',
      'undo',
      'redo',
    ],
  ],
}
</script>
